<template>
  <bazi-section title="八字喜忌改运">
    <view class="xiji-box">
      <view class="title" :style="xijiColor(baziResult.bzXijiGaiyun.wxxj.title)">
        {{ baziResult.bzXijiGaiyun.wxxj.title }}
        <image
          class="element-icon"
          :src="fiveElementInfo(baziResult.bzXijiGaiyun.wxxj.title).img"
        ></image>
      </view>
      <view class="xiji-content">{{ baziResult.bzXijiGaiyun.wxxj.content }}</view>
      <view class="xiji-content">{{ baziResult.bzXijiGaiyun.wxxj.description }}</view>
    </view>
    <!-- <view v-else>
      <no-vip></no-vip>
    </view> -->
  </bazi-section>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import wuxingColor from "@/utils/wuxing.js";
export default {
  components: {
    baziSection,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      baziResult: this.result,
    };
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  methods: {
    xijiColor(title) {
      let ele = title.substr(title.length - 1, 1);
      let { color } = wuxingColor.getWuxingColorInfo(ele);
      return `color:${color}`;
    },
    // 对应五行信息
    fiveElementInfo(type) {
      let ele = type.substr(type.length - 1, 1);
      let { color, img } = wuxingColor.getWuxingColorInfo(ele);
      return {
        color: `color: ${color}`,
        img: `/static/images/bazi/fortune/${img}`,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.xiji {
  width: 100%;
  box-sizing: border-box;
}

.section {
  width: 100%;
  height: 72rpx;
  color: white;
  background: #c5a680;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 46rpx;

  .section-title {
    padding-right: 22rpx;
  }
}

.xiji-box {
  width: 650rpx;
  margin: auto;
  padding: 32rpx 0;

  .title {
    font-size: 32rpx;
    line-height: 48rpx;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 20rpx;

    .element-icon {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .xiji-content {
    font-size: 26rpx;
    padding-bottom: 50rpx;
    letter-spacing: 0.1em;
  }
  .xiji-content:last-child {
    padding-bottom: 0rpx;
  }
}
</style>
